body, html { font-family: 'Roboto', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:after, blockquote:before { content: ''; content: none; }

q:after, q:before { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

.flex, .middle, .center { display: flex; }

.center { justify-content: center; flex-direction: row; }

.middle { flex-direction: row; }

.header { background: #d9376d; width: 100vw; height: 7vh; display: flex; flex-direction: column; justify-content: center; }

.menu { color: white; font-size: 28px; margin-left: 1em; }

.menuClicked { animation: menuClickedAnimation 0.5s; font-size: 100px; }

@keyframes menuClickedAnimation { 0% { transform: scale(1, 1); }
  50% { transform: scale(2, 2); }
  100% { transform: scale(1, 1); } }

.grid { display: flex; }

.column { flex: 1; }

.two { flex: 2; }

.three { flex: 3; }

.four { flex: 4; }

.hero { width: 100%; height: 93vh; }

.mum-image { background-image: url("http://i.imgur.com/lcADHwv.png"); background-size: cover; background-position: -15em 0; height: 93vh; }

.quote { display: flex; height: 79vh; width: 100%; justify-content: center; flex-direction: column; }

.quote blockquote { max-width: 90%; margin: 0 auto; font-size: 48px; color: #d9376d; font-weight: 300; line-height: calc(auto+30px); }

.quick-nav { width: 100%; height: 14vh; display: flex; flex-direction: column; }

.quick-nav .nav-links { margin: 0 auto; width: 90%; }

.quick-nav .nav-links a { margin-right: 2em; background: #d9376d; padding: 0.5em; color: white; text-decoration: none; font-weight: 300; }

@media (max-width: 414px) { .quote-parent { flex: 2; height: 80vh; } .quote-parent .quote { height: 66vh; } .quote-parent .quote blockquote { font-size: 30px; } .mum-image { flex: 1; background-position: 20em -3em; height: 13vh; } .hero-mobile { display: flex; flex-direction: column; } }

@media (max-width: 320px) { .quote-parent { height: 80vh; } .quote-parent .quote { height: 66vh; } .quote-parent .quote blockquote { font-size: 24px !important; } .quick-nav a { margin-right: 1em; font-size: 12px; } }

/*# sourceMappingURL=main.css.map */